<template>
  <div>
    <i :class="icon" style="font-size:40px;" />
    <el-popover
      placement="right"
      width="400"
      trigger="click"
    ><el-input v-model="icon" />
      <el-scrollbar style="height:300px;">
        <el-button v-for="value in options" :key="value" style="margin:4px;padding:5px;"><i :class="value" style="font-size:40px;" @click="onChange" /></el-button>
      </el-scrollbar>
      <el-button slot="reference" size="mini" type="primary" style="margin-left:10px" icon="el-icon-edit">选择图标</el-button>
    </el-popover>
  </div>
</template>

<script>
const iconfont = require('@/assets/fonts/iconfont.json')
export default {
  props:['icon'],
  name:'iconBrowser',
  data(){
    return {
      options:[]
    }
  },
  mounted() {
    const font_family = iconfont.font_family
    const css_prefix_text = iconfont.css_prefix_text
    iconfont.glyphs.forEach((item) => {
      this.options.push(font_family + ' ' + css_prefix_text + item.font_class)
    })
  },
  methods: {
    onChange(e){
      this.$emit('onChange',e.currentTarget.className)
    }

  },
};
</script>

<style>

</style>>
